import React, {Component, Fragment} from 'react';
import logo from '../logo.svg';
import {Layout, Breadcrumb, Row, Col, Drawer, Button} from 'antd';
import Header from '../components/header'
import Footer from '../components/footer'
import UserList from '../components/userList'
import Socket from '../components/socket'

const {Content} = Layout;

class ChatPage extends Component{
    constructor(props){
        super(props)
        this.state={
          userList:[],
          visible: false
        }
        this.addUser = this.addUser.bind(this)
    }

    addUser(target){
      let obj, index= this.state.userList.length
      console.log(target)
      obj = {
        id:index,
        avatar:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
        username:target,
        url:"https://mfree.xyz",
        desc:`${target}  come in`
      }
      console.log(obj)
      this.setState({
        userList:[...this.state.userList, obj]
      })
    }

     showDrawer () {
        this.setState({
          visible: true,
        });
    };

    onClose () {
        this.setState({
          visible: false,
        });
    };

    render(){
        return (
          <Fragment>
            <Layout className="layout">
              <Header logo={logo} initKey={'2'} username={this.props.name} />
              <Content className="cts">
                
                <Row type={'flex'} justify={'center'}>
                    <Col xs={{span:24}} md={{span:16}}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>首页</Breadcrumb.Item>
                            <Breadcrumb.Item>应用</Breadcrumb.Item>
                            <Breadcrumb.Item>聊天室</Breadcrumb.Item>
                        </Breadcrumb>
                        <div className='chatIn'>
                            <Row gutter={16}>
                                <Col xs={{span:0}} md={{span:8}}>
                                    <UserList list={this.state.userList}  />
                                </Col>
                                <Col xs={{span:3}} md={{span:0}}><Button type="primary" icon="team" onClick={this.showDrawer.bind(this)}>朋友们</Button></Col>
                                <Col xs={{span:24}} md={{span:16}}>
                                    <Socket ws={'ws://localhost:8001'}  getUsers={this.addUser} />
                                </Col>
                            </Row>
                        </div>
                    </Col>
                </Row>
              </Content>
              <Footer logo={logo} />  
            </Layout>
            <Drawer
            title='朋友列表'
            placement="left"
            closable={true}
            onClose={this.onClose.bind(this)}
            visible={this.state.visible}
            bodyStyle={{padding:0}}
            >
                <UserList list={this.state.userList}  />
            </Drawer>
          </Fragment>
        );
      }

}

export default ChatPage